<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game 1</title>
    <link rel="stylesheet" type="text/css" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./style/game.css">
</head>
<body>
    <header>Clear Those Blocks!!!</header>
    
    <content id="gameZone">
        <canvas id="id-canvas" width="800" height="500"></canvas>
    </content>
    
    <aside class="leftSide">
        <aside id="userInfo">
            <span id="username" class="hidden"></span>
            <button id="login" class="">Would you like to log in?</button>
            <button id="logout" class="hidden">Log Out</button>
        </aside>

        <aside id="score">
            <span class="score-now title">加油得分：</span>
            <span type="text" id="score-now">0</span>
        </aside>

        <aside id="time">
            <span class="time-now title">时间越快越好哦：</span>
            <span type="text" id="time-now-min">0</span> : <span id="time-now-s">0</span>
        </aside>
        
        <aside id="score-max" >
            <span class="my-score title">您的历史最高分：</span>
            <span type="text" id="my-score">0</span>
        </aside>
        
        <aside id="time-min">
            <span class="my-time title">您的历史最少用时：</span>
            <span type="text" id="my-time">0</span> min
        </aside>

        <aside id="hero">
            <span class="hero-name title">(No.1)：</span>
            <span type="text" id="hero-name"></span>
        </aside>
        
        <aside id="score-max-net">
            <span class="hero-score title">Ta的历史最高分：</span>
            <span type="text" id="hero-score"></span>
        </aside>
        
        <aside id="time-min-net">
            <span class="hero-time title">Ta的历史最少时间：</span>
            <span type="text" id="hero-time"></span> min
        </aside>
    </aside>

    <aside id="rightSide">
        <div id="selectLevel">
            <div class="my-title">选择关卡：</div>
            <div class="dropdown selections">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <span id="selectedItem"> Level 1 </span>
                    <span class="caret"></span>
                </button>

                <ul class="dropdown-menu" aria-spanledby="dropdownMenu1">
                    <li><a href="#">Level 1</a></li>
                    <li><a href="#">Level 2</a></li>
                </ul>
            </div>
        </div>
        
        <div id="operationDetail">
            <article>
                <p class="my-title">操作说明：</p>
                <p><span class="glyphicon glyphicon-arrow-up"></span>:<span>发射小球</span></p>
                <p><span class="glyphicon glyphicon-arrow-left"></span>:<span>向左移动</span></p>
                <p><span class="glyphicon glyphicon-arrow-right"></span>:<span>向右移动</span></p>
                <p><span class="glyphicon glyphicon-arrow-down"></span>:<span>暂停游戏</span></p>
            </article>
        </div>
    </aside>
    
    
    <footer>Made by hh2o4 (*/ω＼*)</footer>

    <script src="./libs/jquery-3.1.1.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./script/gameLogic/board.js"></script>
    <script src="./script/gameLogic/ball.js"></script>
    <script src="./script/gameLogic/block.js"></script>
    <script src="./script/gameLogic/blockGrid.js"></script>
    <script src="./script/gameLogic/update.js"></script>
    <script src="./script/gameLogic/game.js"></script>
    <script src="./script/gameLogic/main.js"></script>

    <script src="./script/pageLogic/selectLevel.js"></script>
    <script src="./script/pageLogic/login.js"></script>
    <script src="./script/pageLogic/logout.js"></script>
    <script src="./script/pageLogic/findHero.js"></script>
    <script src="./script/pageLogic/checkUser.js"></script>
    
</body>
</html>